<div class="container">
  <app-navbar title="Sweet Alert"></app-navbar>
  <div class="row page-title">
    <h3 class="text-center">Sweet Alert 2</h3>
  </div>
  <div class="row">
    <p class="text-center subtitle">A beautiful plugin, that replace the classic alert, Handcrafted by our friend <a href="https://twitter.com/t4t5" target="_blank">Tristan Edwards</a>. Please checkout the <a href="http://limonte.github.io/sweetalert2/" target="_blank">full documentation</a>.</p>
  </div>
  <div class="row page-title">
    <div class="col-md-3 col-sm-6 col-xs-12">
      <div class="card">
        <h5>Basic example</h5>
        <button mat-raised-button class="btn btn-rose" (click)="openAlert('basic')">TRY ME!</button>
      </div>
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
      <div class="card">
        <h5>A title with a text under</h5>
        <button mat-raised-button class="btn btn-rose" (click)="openAlert('text')">TRY ME!</button>
      </div>
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
      <div class="card">
        <h5>A success message</h5>
        <button mat-raised-button class="btn btn-rose" (click)="openAlert('success')">TRY ME!</button>
      </div>
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
      <div class="card">
        <h5>Custom HTML description</h5>
        <button mat-raised-button class="btn btn-rose" (click)="openAlert('html')">TRY ME!</button>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-3 col-sm-6 col-xs-12">
      <div class="card">
        <h5>A warning message, with a function attached to the "Confirm" Button...</h5>
        <button mat-raised-button class="btn btn-rose" (click)="openAlert('confirm')">TRY ME!</button>
      </div>
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
      <div class="card">
        <h5>...and by passing a parameter, you can execute something else for "Cancel"</h5>
        <button mat-raised-button class="btn btn-rose" (click)="openAlert('cancel')">TRY ME!</button>
      </div>
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
      <div class="card">
        <h5>A message with auto close timer set to 2 seconds</h5>
        <button mat-raised-button class="btn btn-rose" (click)="openAlert('close')">TRY ME!</button>
      </div>
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
      <div class="card">
        <h5>Modal window with input field</h5>
        <button mat-raised-button class="btn btn-rose" (click)="openAlert('input')">TRY ME!</button>
      </div>
    </div>
  </div>
</div>
